<template>
  <view>
    <u-navbar
        title="建议反馈详情"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        :background="navbarStyel">
    </u-navbar>
    <view class="top">
      建议类型
      <text style="color: crimson">*</text>
      <view class="itemContent">
        <view class="itemType item_bg" >
          {{ listType[detailsData.type - 1] }}
        </view>
      </view>
    </view>
    <view class="content1">
      建议描述
      <text style="color: crimson">*</text>
      <view style="margin-top: 30rpx"></view>
      <view>{{ detailsData.content }}</view>
    </view>
    <view class="content2">
      上传图片
      <text style="color: crimson">*</text>
      <view style="margin-top: 30rpx"></view>
      <view v-for="(item, index) in detailsData.imgs" :key="index" class="upload_box">
        <image @click="previewImage(index)" :src="item" mode="aspectFill" class="feed_img"></image>
      </view>
    </view>
    <view class="content3">
      <view>
        联系电话
        <text style="color: crimson">*</text>
      </view>
      <view class="input_content">{{ detailsData.phone }}</view>
    </view>
    <view class="content3" v-if="detailsData.type===1 || detailsData.type===2 || detailsData.type===3 || detailsData.type===5">
      <view>
        选择订单
        <text style="color: crimson">*</text>
      </view>
      <view class="input_content">
        <text style="color: #666666;font-size: 29rpx">{{ detailsData.link_order }}</text>
      </view>
    </view>

    <view style="height: 80rpx"></view>\
    <view style="padding-bottom: env(safe-area-inset-bottom)"></view>
  </view>
</template>

<script>
import {baseUrl} from "@/api/request";
import $api from "@/api/api";

export default {
  data() {
    return {
      navbarStyel: {
        backgroundColor: '#FDE52F',
        color: '#000000'
      },
      listType: ['订单问题', '餐品问题', '商家问题', '程序BUG', '售后问题', '其他反馈'],
      currentIndex: 0,
      // 最大图片数量
      action: baseUrl + '/api/order/upload',
      HeaDers: {
        'authorization': uni.getStorageSync('token')
      },
      order_no: '',
      // 提交数据源
      detailsData: {},
      detailsID: '', // 反馈详情ID


    };
  },
  onLoad(options) {
    let that = this
    that.detailsID = options.id
    that.getFeedbackDetail()
  },
  methods: {
    // 选择问题类型
    chooseType(index) {
      this.currentIndex = index;
      this.formData.type = Number(index + 1)
    },
    // 跳转问题反馈类别页面
    toFeedbackList(){
      uni.navigateTo({
        url: '/subpackageA/pages/feedback/feedback'
      })
    },

    // 验证并提交意见反馈
    async getFeedbackDetail(){
      let that = this
      await that.$api.getFeedbackDetailAPI({
        id: that.detailsID
      }).then(res => {
        console.log('提交成功', res.data)
        if (res.data.code === 200) {
          that.detailsData = res.data.result
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          })
        }
      })
    },
    //  晒图点击图片放大特效
    previewImage (e){
      const that = this
      const imgUrlArr = []
      //重组image图片数组
      that.detailsData.imgs.forEach(item => {
        imgUrlArr.push(item)
      })
      //图片放大预览
      uni.previewImage({
        urls: imgUrlArr,
        current: e,
        indicator: 'number',
        success: function (res) {
          console.log("成功success=",res)},
        fail: function (res) {
          console.log("失败fail=",res)},
        complete: function (res) {
          console.log("完成complete=",res)},
      })
    },
  }
}
</script>

<style lang="scss">
page {
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.up-button{
  background-color: #fbe32f;
  border-radius: 60rpx;
}
.up-button:after{
  border: none;
}
.submit{
  margin: 0 30rpx;
}
.top, .content1, .content2, .content3 {
  background-color: #FFFFFF;
  padding: 30rpx;
  margin-bottom: 20rpx;
  font-size: 30rpx;
}

.circle_btn{
  width: 90rpx;
  height: 90rpx;
  background-color: #FDE52F;
  position: fixed;
  bottom: 580rpx;
  right: 20rpx;
  border-radius: 100rpx;
  font-size: 20rpx;
  display: flex;
  text-align: center;
  align-items: center;
  box-shadow: #B1B1B1 2px 2px 8px;
}

.bottom {
  width: 100%;
  position: fixed;
  bottom: 0;
}

.itemContent {
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 auto;

  .itemType {
    background-color: #F6F6F6;
    border-radius: 10rpx;
    padding: 20rpx 52rpx;
    margin-top: 20rpx;
    margin-right: 26rpx;
    color: #666666;
    font-size: 26rpx;
  }

  .itemType:nth-of-type(3n) {
    margin-right: 0;
  }

  .item_bg {
    background-color: #FDE52F;
    color: black;
  }

  .item_bg1 {
    background-color: #F6F6F6;
  }
}

.content3 {
  display: flex;
  align-items: center;

  .input_content {
    margin-left: 20rpx;
    flex: 1;
  }
}

.img_item {
  margin-right: 14rpx;

  .img_item:nth-of-type(5n) {
    margin-right: 0;
  }

  .add {
    width: 120rpx;
    height: 188rpx;
    background-color: #F6F6F6;
    font-size: 88rpx;
    font-weight: lighter;
    display: flex;
    align-items: center;
    color: #999999;
  }
}
.upload_box{
  display: flex;
  .feed_img{
    width: 120rpx;
    height: 120rpx;
  }
}

</style>
